<template>
  <div class="app-container">
    <!-- 工具栏 start-->
    <EzForm
      ref="menuForm"
      :formMap="formMap"
      v-model="formData"
      @search="handleRequest"
    ></EzForm>

    <!-- 工具栏 end-->

    <div class="page-content">
      <el-table
        ref="table"
        :data="lists"
        :height="st"
        v-loading="loading"
        style="width: 100%"
        row-key="id"
        lazy
      >
        <el-table-column label="操作用户" align="center" width="130px">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作时间" align="center" width="160px">
          <template slot-scope="scope">
            <span>{{ scope.row.optime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="ip" align="center" width="160px">
          <template slot-scope="scope">
            <span>{{ scope.row.remote_addr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="请求路径" width="250" align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.url_path }}</span>
          </template>
        </el-table-column>
        <el-table-column label="请求参数" align="left">
          <template slot-scope="scope">
            <div class="response">
              <json-view :data="scope.row.params" :closed="true"></json-view>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        :page="currentPage"
        :total="total"
        :size="pageSize"
        @sizeChange="sizeChange"
        @currentChange="currentChange"
        ref="paginationTotal"
      ></pagination>
    </div>
  </div>
</template>

<script>
import jsonView from "vue-json-views";
export default {
  components: { jsonView },

  data() {
    return {
      formMap: [
        {
          label: "操作用户",
          key: "username",
          type: "input",
        },
        {
          label: "请求路径",
          key: "url_path",
          type: "input",
        },
        {
          label: "请求方式",
          key: "method",
          type: "select",
          options: [
            { label: "POST", value: "POST" },
            { label: "GET", value: "GET" },
          ],
        },
        {
          label: "创建日期",
          key: "created_at",
          type: "cratedate",
        },
      ],
      formData: {
        username: "",
        url_path: "",
        method: "",
        created_at: "",
      },
      lists: [],
      loading: true,

      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      total: 0,
      // 个数选择器（可修改）
      pageSizes: [50, 100, 200],
      // 默认每页显示的条数（可修改）
      pageSize: 30,

      st: 0,

      optime: [],
      choiceDate: "",
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime();
          if (maxDate) {
            this.choiceDate = "";
          }
        },
        disabledDate: (time) => {
          const self = this;
          if (self.choiceDate) {
            const selectDate = new Date(self.choiceDate);
            const nowYear = selectDate.getFullYear(); // 当前年
            const nowMonth = selectDate.getMonth(); // 当前月
            // 本月的开始时间
            const monthStartDate = new Date(nowYear, nowMonth, 1).getTime();
            // 本月的结束时间
            const monthEndDate = new Date(nowYear, nowMonth + 1, 0).getTime();
            // 此处以不能跨月做示范
            return (
              time.getTime() < monthStartDate || time.getTime() > monthEndDate
            );
          }
        },
      },

      searchParams: {
        username: "",
        url_path: "",
        optime_begin: "",
        optime_end: "",
        method: "POST",
      },

      dialogloading: true,
    };
  },
  created() {
    this.handleInit();
  },

  mounted() {
    let that = this;
    that.$util.autoHeight(that, that.$refs.table.$el);
  },
  methods: {
    reseting(o = {}) {
      o = { lists: [], ...o };
      this.$util.setAttr(this, o);
    },

    // 搜索
    handleSearch() {
      this.currentPage = 1;
      this.handleRequest();
    },

    // 弹框的行更改
    rowChange(e) {
      console.log(e);
    },

    sizeChange(e) {
      let that = this;
      that.currentPage = 1;
      that.pageSize = e;
      that.handleRequest();
    },
    currentChange(e) {
      this.currentPage = e;
      this.handleRequest();
    },

    //请求列表
    async handleRequest(statu) {
      let that = this;
      let { currentPage, pageSize,formData } = that;

      that.formData.page_size = pageSize;
      that.formData.page = currentPage;

      if (that.optime) {
        that.formData.optime_begin = that.optime[0];
        that.formData.optime_end = that.optime[1];
      }

      try {
        that.loading = true;
        let { result } = await that.$.authority.authSysLogIndex(
          that.formData
        );
        that.total = result.pagination.total_count;
        if (!statu) {
          that.$refs.table.bodyWrapper.scrollTop = 0;
        }
        that.lists = result.list;
        that.loading = false;
      } catch (e) {
        that.loading = false;
      }
    },

    //初始化
    async handleInit() {
      const that = this;
      await that.handleOptime();

      await this.handleRequest();
    },

    /**
     * 处理时间显示
     * @returns {Promise<void>}
     */
    async handleOptime() {
      //获取新的时间(2019.4.12）
      let date = new Date();
      //获取当前时间的年份转为字符串
      let year = date.getFullYear().toString(); //'2019'
      //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
      let month = date.getMonth() + 1;
      let day = 0;
      console.log(date);
      console.log(date.getMonth());
      if (month == 2) {
        day = !year % 4 ? 29 : 28;
      } else if (month == 4 || month == 6 || month == 9 || month == 11) {
        day = 30;
      } else {
        day = 31;
      }
      this.optime = [
        new Date(year, month - 1, 1, 0, 0),
        new Date(year, month - 1, day, 23, 59, 59),
      ];
    },
  },
};
</script>

<style lang="scss"></style>
